let apiTypeData = [
    { name: "全部", keyword: "身份证实名", isnew: false },
    { name: "生活服务", keyword: "银行卡", isnew: false },
    { name: "金融科技", keyword: "短信", isnew: false },
    { name: "交通地理", keyword: "天气", isnew: false },
    { name: "充值缴费", keyword: "短信", isnew: false },
    { name: "数据智能", keyword: "手机归属地", isnew: false },
    { name: "企业工商", keyword: "IP", isnew: false },
    { name: "应用开发", keyword: "手机归属地", isnew: false },
    { name: "电子商务", keyword: "IP", isnew: false },
    { name: "吃喝玩乐", keyword: "视频", isnew: false },
    { name: "文娱视频", keyword: "视频", isnew: false },
    { name: "免费接口大全", keyword: "短信", isnew: true },
    { name: "短信", keyword: "身份证实名", isnew: false },
    { name: "汽车", keyword: "银行卡", isnew: false },
    { name: "核验", keyword: "银行卡", isnew: false },
    { name: "最新发布", keyword: "银行卡", isnew: true },
    { name: "API私有化部署", keyword: "身份证实名", isnew: true },
  ] 
  let aHtml = ""

apiTypeData.forEach(function(v){
    if(v.isnew===true){
        aHtml = aHtml+ `<a href ="#" class='api-link' keyword="${v.keyword}">${v.name}</a>`
    }else{
        // aHtml = aHtml+`<a href ="#" class='api-a'>${v.name}</a>`
        aHtml = aHtml + `<a href="#" class='api-a' keyword="${v.keyword}">${v.name}</a>`
    }
})
let links = document.querySelector(" .api-list")
links.innerHTML = aHtml
let btns =document.querySelectorAll(".api-list a")
btns.forEach(function(v){
    v.addEventListener("click",function(){
        console.log(this.textContent)
        let input = document.querySelector(".api-input")
       input.placeholder = this.getAttribute("keyword")
        let strong = document.querySelector(".api-span")
        strong.innerText = this .textContent
    })
})
 
  //API列表区域 模拟服务器返回的数据
let listDataArr = [
    //第一行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

    //第二行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第三行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第四行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

]
// let listHtml = ""
// // 遍历数组
// listDataArr.forEach(function (v) {
//     // 拼接html片段
//     listHtml += `<li class="api-li fl">
//         <span class="${v.isSpecial === true ? 'on' : 'on-on'}">企业专用</span>
//         <div class="content">
//         <a href="#" class="api-detail">
//             <img src="./源码大数据/images/${v.img}" alt="">
//             <p>${v.name}</p>
//             <span class="${v.isSpecial ? 'money' : 'free'}">${v.price}</span>
//         </a>
//         <button class="api-apply">申请数据</button>
//     </li>`
// })
// let ul = document.querySelector(".api-list")
// ul.innerHTML = listHtml
let listHtml = ""
listDataArr.forEach(function(v){
listHtml += `<li class= "api-li fl">
<span class="${v.isSpecial === true ? 'on' : 'on-on'}">企业专用</span>
<div class="content">
  <a href="APIDetails.html">
      <img src="./源码大数据/images/${v.img}" alt="">
      <p>${v.name}</p>
      <p class="${v.isSpecial ? 'api-red' : 'api-green'}">${v.price}</p>
  </a>
</div>
<a class="apply-data" href="#">申请数据</a>
</li>`
console.log(listHtml);
})
let ul = document.querySelector(".api-ul")
ul.innerHTML = listHtml
let mask =document.querySelector(".mask")
ul .addEventListener("click",function(e){
    if(e.target.className=== "apply-data"){
        mask.style.display = "block"
    }
})
mask .addEventListener("click",function(e){
    if (e.target.className ==="mask")
    e.target.style.display ="none"
})

let loginBtns = document.querySelectorAll(".login-btns a")
let loginDiv = document.querySelectorAll(".box .login-box")
loginBtns.forEach(function(v,i){
    v.addEventListener("click",function(){
        for (let x =0 ; x< loginBtns.length; x++){

       
        loginBtns[x].className = ""
        loginDiv[x].classList.remove("login-active") }
   
    this.className ="active"
    loginDiv[i].classList.add("login-active") 
})
})

console.log(loginBtns)
console.log(loginDiv )
